<template>
  <!-- 全局布局容器 -->
  <el-container class="app-container">
    <!-- 顶部导航栏 -->
    <el-header class="app-header">
      <div class="header-content">
        <!-- 系统Logo -->
        <router-link to="/" class="logo">
          <img src="@/assets/logo.png" alt="OJ System" class="logo-img">
          <h1 class="logo-text">在线判题系统</h1>
        </router-link>

        <!-- 导航菜单 -->
        <el-menu
          :default-active="activeMenu"
          mode="horizontal"
          class="nav-menu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="/problems">题库列表</el-menu-item>
          <el-menu-item index="/submissions">提交记录</el-menu-item>
          <el-menu-item index="/ranking">排行榜</el-menu-item>
        </el-menu>

        <!-- 右侧用户操作区 -->
        <div class="user-panel">
          <template v-if="!authStore.isAuthenticated">
            <el-button link @click="openLoginDialog">登录</el-button>
            <el-divider direction="vertical" />
            <el-button link @click="openRegisterDialog">注册</el-button>
          </template>
          <el-dropdown v-else>
            <div class="user-info">
              <el-avatar :size="30" :src="authStore.user.avatar" />
              <span class="username">{{ authStore.user.username }}</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="goProfile">个人中心</el-dropdown-item>
                <el-dropdown-item v-if="authStore.isAdmin" @click="goAdmin">管理后台</el-dropdown-item>
                <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-header>

    <!-- 主内容区域 -->
    <el-main class="app-main">
      <router-view v-slot="{ Component }">
        <transition name="fade-transform" mode="out-in">
          <keep-alive :include="cachedViews">
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
    </el-main>

    <!-- 全局加载状态 -->
    <el-dialog
      v-model="globalLoading"
      title="加载中"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-progress :percentage="loadingProgress" :indeterminate="true" />
    </el-dialog>

    <!-- 登录/注册对话框 -->
    <auth-dialog
      v-model:visible="authDialogVisible"
      :dialog-type="authDialogType"
    />
  </el-container>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '@/stores/auth'
import AuthDialog from '@/components/AuthDialog.vue'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

// 响应式状态
const activeMenu = ref('')
const authDialogVisible = ref(false)
const authDialogType = ref('login')
const cachedViews = ref(['ProblemList', 'ProblemDetail'])

// 计算当前激活菜单项
watch(
  () => route.path,
  (newPath) => {
    activeMenu.value = newPath
  },
  { immediate: true }
)

// 全局加载状态
const globalLoading = computed(() => authStore.loading)
const loadingProgress = ref(0)

// 打开登录对话框
const openLoginDialog = () => {
  authDialogType.value = 'login'
  authDialogVisible.value = true
}

// 打开注册对话框
const openRegisterDialog = () => {
  authDialogType.value = 'register'
  authDialogVisible.value = true
}

// 处理菜单选择
const handleMenuSelect = (index) => {
  router.push(index)
}

// 用户登出
const logout = async () => {
  try {
    await authStore.logout()
    ElMessage.success('已退出登录')
    router.push('/')
  } catch (error) {
    ElMessage.error(error.message)
  }
}

// 导航到个人中心
const goProfile = () => {
  router.push(`/user/${authStore.user.id}`)
}

// 导航到管理后台
const goAdmin = () => {
  router.push('/admin')
}
</script>

<style lang="scss" scoped>
.app-container {
  height: 100vh;

  .app-header {
    height: 60px;
    background: var(--el-color-primary);
    color: white;
    padding: 0 20px;

    .header-content {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;

      .logo {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: inherit;

        .logo-img {
          width: 40px;
          height: 40px;
          margin-right: 10px;
        }

        .logo-text {
          font-size: 20px;
          margin: 0;
        }
      }

      .nav-menu {
        flex: 1;
        background: transparent;
        border: none;
        margin-left: 40px;

        :deep(.el-menu-item) {
          color: rgba(255, 255, 255, 0.8);
          font-size: 16px;
          transition: all 0.3s;

          &:hover {
            color: white;
            background: rgba(255, 255, 255, 0.1);
          }

          &.is-active {
            color: white;
            border-bottom-color: white;
          }
        }
      }

      .user-panel {
        .user-info {
          display: flex;
          align-items: center;
          cursor: pointer;

          .username {
            margin-left: 8px;
            font-size: 14px;
          }
        }
      }
    }
  }

  .app-main {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

// 页面切换动画
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.3s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>